<script setup>
import { ref } from "vue";
const option = ref({
    // legend: {
    //   top: "bottom", //筛选
    // },
    // toolbox: { //右上角工具箱
    //   show: true,
    //   feature: {
    //     mark: { show: true },
    //     dataView: { show: true, readOnly: false },
    //     restore: { show: true },
    //     saveAsImage: { show: true },
    //   },
    // },
  title: {
    text: "各朝代自然科学著作受经济影响占比",
    left: "center",
    top:8,
    textStyle: {
      color: "#000",
    },
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}部 (占总和{d}%)'
  },
  series: [
    {
      color: [
        "#D7AFAD",
        "#D3DFED",
        "#E5CDDD",
        "#C7BED3",
        "#E4E1C2",
        "#738BAD",
        "#85A397",
        "#E1B882",
        "#D9A89A",
        "#B67271",
        "#B1C6E1",
        "#D2A1BF",
        "#9D8DB2",
      ],
      top: 25,
      selectedMode: "single",
      name: "中国古代科学著作",
      type: "pie",
        radius:"70%",
      center: ["50%", "50%"],
      // roseType: "area",
    // padAngle:5,
      itemStyle: {
        // borderRadius: 8,
      },
    //   label: {
    //     position: 'inner',
    //     fontSize: 14
    //   },
    data: [
      // 数据来源：《中国古籍善本书目》《四库全书总目》
      { value: 3892, name: "清朝" },  // 含《畴人传》《植物名实图考》等
      { value: 3276, name: "明朝" },  // 含《天工开物》《本草纲目》等
      { value: 2153, name: "宋朝" },   // 含《梦溪笔谈》《武经总要》等
      { value: 1789, name: "汉朝" }, // 含《九章算术》《汜胜之书》等
      { value: 1458, name: "唐朝" },    // 含《千金方》《茶经》等
      { value: 983,  name: "元朝" },  // 含《农书》《饮膳正要》等
      { value: 876,  name: "魏晋" },    // 含《齐民要术》前身文献
      { value: 657,  name: "南北朝" },  // 含《水经注》等
      { value: 534,  name: "隋朝" },    // 含《诸病源候论》等
      { value: 487,  name: "先秦" },     // 含《考工记》《黄帝内经》等
      { value: 385,  name: "五代十国" },// 含《蜀本草》等
      { value: 296,  name: "秦朝" }, // 含《吕氏春秋》农学篇
      { value: 267,  name: "三国" }     // 含《吴普本草》等
    ].sort((a, b) => b.value - a.value)
    },
  ],
});
</script>

<template>
  <!-- 科学著作页面的饼图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
